<template>
	<div class="root clearfix root-green">
		<div class="left" :class="hidemenu?'collapse':''">
			<Menu />
		</div>
		<div class="main-container">
			<Head />
			<div class="main-board">
				<BreadCrumb />
				<Mains />
			</div>
		</div>
	</div>
</template>
<script>
import { mapState } from '@lib/x_.js'
import Menu from './sub/menu.vue'
import Head from './sub/head.vue'
import Foot from './sub/foot.vue'
import Mains from './sub/main.vue'
import BreadCrumb from './sub/breadCrumb.vue'
import { tokenRefreshToken } from '@api/token.js'
import { getCookie, setCookie, removeCookie } from '@utils/cookie.js'
export default {
	components: { Menu, Head, Foot, Mains, BreadCrumb },
	computed: {
		...mapState(['device', 'hidemenu'])
	},
	created() {
		this.$store.dispatch('getFamilyList')
		this.$store.dispatch('getDiseaseTypeList')
		this.$store.dispatch('getDiseaseHistoryList')
		this.$store.dispatch('getFamilyHistoryList')
		this.$store.dispatch('getNowTreatmentList')
		this.$store.dispatch('getTagList')
		this.$store.dispatch('getUserList')
		this.$store.dispatch('getAllergicList')
		this.$store.dispatch('getMarryTypeList')
		setTimeout(() => {
			this.tokenRefreshToken()
		}, 1000 * 3 * 60)
	},
	methods: {
		tokenRefreshToken() {
			tokenRefreshToken({
				refreshToken: getCookie('refreshToken')
			}).then(res => {
				if (res.code === '0') {
					const { refreshToken, token } = res.data
					setCookie('refreshToken', refreshToken)
					setCookie('token', token)
					if (this._isDestroyed === false) {
						setTimeout(() => {
							this.tokenRefreshToken()
						}, 1000 * 3 * 60)
					}
				} else {
					removeCookie('refreshToken')
					removeCookie('token')
					return this.$Message.error('token 失效')
				}
			})
		}
	}
}
</script>

<style lang="scss">
.root {
	.main-container {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        .main-board{
            flex: 1;
            overflow-y: scroll;
            background-color: #f3f6fa;
        }
	}
	.bread {
		margin-left: 50px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.left {
		border-right: 1px solid #d7dde4;
		transition: all 0.2s ease;
        margin-left: 0;
        float: left;
	}
	.collapse {
		margin-left: -200px;
	}
}
</style>